<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width, initial-scale=1.0">
    <title>详情列表</title>
    <script src="${ctx}/js/jquery1.8.2.min.js"></script>
    <script src="${ctx}/js/vue.min.js"></script>
    <script src="${ctx}/js/changeSize.js"></script>
    <script src="${ctx}/layui/layui.all.js"></script>
    <link rel="stylesheet" href="${ctx}/layui/css/layui.mobile.css">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="${ctx}/css/reset.css">
</head>
<style>
    [v-cloak] {
        display: none;
    }

    .task_list {
        padding: 0.5rem;
    }

    .task_header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        text-align: center;
        color: #fff;
        height: 2.6rem;
        line-height: 2.6rem;
        font-size: 1rem;
        border-bottom: 0.2rem solid #f5f5f5;
        z-index: 2;
        background: #2D90B0;
    }

    .task_header img {
        position: absolute;
        width: 1rem;
        height: 1rem;
        top: 50%;
        transform: translateY(-50%);
        left: 0.5rem;
    }

    .task_box {
        position: relative;
        border-radius: 2px;
        padding: 0.7rem;
        background: #F5F5F5;
        margin-bottom: 1rem;
    }

    .task_detail {
        display: flex;
    }

    .task_detail img {
        margin-right: 0.8rem;
        width: 3rem;
        height: 3rem;
    }

    .task_detail div {
        padding-top: 0.2rem;
    }

    .title {
        font-size: 0.92rem;
    }

    .describe {
        margin-top: 0.5rem;
        font-size: 0.8rem;
        color: #ACAEAD;
    }

    .describe i {
        color: #ED3F27;
    }

    .status {
        font-size: 0.8rem;
        margin-top: 1rem;
    }

    .fail {
        color: #ED3F27;
    }

    .check {
        color: #2D92B2;
    }

    .finish {
        color: #89C997;
    }

    .pass_detail {
        position: absolute;
        right: 0.4rem;
        top: 0.4rem;
    }

    .pass_detail img {
        width: 4.15rem;
        height: 1.97rem;
    }
</style>
<body>
<div id="app">
    <div class="task_list" v-cloak>
        <div class="task_box" v-for="(item,index) in task" :key="index"
             @click="gotoDetail(item.category,item.taskId,item.needCheck)">
            <div class="task_detail">
                <img :src="item.icon">
                <div>
                    <p class="title">{{item.title}}</p>
                    <p class="describe">任务完成可获得佣金<i>{{item.money?item.money.toFixed(2):'0.00'}}</i>元</p>
                    <p class="describe" v-if="item.status!=='WaitSumbit'">
                        提交时间：{{item.submitTime?item.submitTime:'未提交'}}</p>
                    <p class="status">
                        <span v-if="item.status==='CheckFailure'" class="fail">失败原因：{{item.mark}}</span>
                        <span v-else-if="item.status==='WaitCheckout'" class="check">请耐心等待审核</span>
                        <span v-else-if="item.status==='WaitSumbit'" class="check">待完成</span>
                        <span v-else-if="item.status==='CheckSuccess'" class="finish">佣金已入账</span>
                    </p>
                </div>
            </div>
            <span class="pass_detail">
                <img src="${ctx}/image/fail.png" v-if="item.status==='CheckFailure'">
                <img src="${ctx}/image/check.png" v-else-if="item.status==='WaitCheckout'">
                <img src="${ctx}/image/finish.png" v-else-if="item.status==='CheckSuccess'">
            </span>
        </div>
    </div>
</div>

</body>
</html>
<script>

    var app = new Vue({
        el: '#app',
        data: {
            size: 6,
            current: 1,
            task: [],
            noData: true,
            hasMore: true,
            init: 0
        },
        mounted: function () {
            this.getDetail(1, 999);
            window.refreshList = this.refreshList;
            window.xy_web.setActivityTitle('任务记录列表');
            window.xy_web.showAndHideRecord(false);
        },
        methods: {
            getDetail: function (current, size) {
                var that = this;
                var header = window.xy_web.getNetHeader();
                $.ajax({
                    url: "/web/task/history",
                    type: 'post',
                    data: {"page": current, "limit": size},
                    headers: JSON.parse(header),
                    // headers:{"appStore":"test","appid":"xianyu","brand":"test","imei":"863254030974322","lat":"","lng":"","macAddr":"C4:0B:CB:F2:C7:18","os":"Othernull","osv":"MI 6","sign":"7e058d5d632eaf9e75de4a687f12fdfd","time":"1565253309935","userid":"8f5cbd2a-f22d-4205-a7af-be2880a24a5b","version":"100"},
                    dataType: "json",
                    success: function (res) {
                        if (res) {
                            that.task = res.data;
                            console.log(that.task);
                        } else {
                            console.log('fail');
                        }
                        window.xy_web.closeRefresh();
                    }
                });
            },

            // 刷新数据
            refreshList: function () {
                this.getDetail(1, 999);
            },

            // 初始化数据
            initData: function (e) {
                var packages = this.task;
                packages ? packages = packages.concat(e.data) : packages = e.data;
                this.task = packages;
                this.noData = !packages && e.data.length === 0;
                this.hasMore = this.init > 6 && e.data.length === this.init;
                this.current = this.current += 1;
            },

            // 滚动条设置
            onScroll: function () {
                var innerHeight = document.querySelector('#app').clientHeight;
                var outerHeight = document.documentElement.clientHeight;
                var scrollTop = document.documentElement.scrollTop;
                console.log("fdfsdfsd")
                if (outerHeight + scrollTop >= innerHeight) {
                    // 加载更多操作

                    if (this.hasMore) {

                        this.getDetail(this.current, 6)
                    }
                }
            },
            comeback: function () {
                window.history.back(-1);
            },
            gotoDetail: function (type, id, status) {
                window.xy_web.showLoading();
                if (type === 'Common' || type ==='Redbook') {
                    // if (type === 'Soso') {
                    //     window.location.href = '/web/api/task/' + (!status && type === 'Soso'?'sosodetail':'checksoso') + '?type=' + type + '&taskId=' + id;
                    // }else {
                    //     window.location.href = '/web/api/task/taskdetail?type=' + type + '&taskId=' + id;
                    // }
                    window.location.href = '/web/api/task/taskdetail?type=' + type + '&taskId=' + id;
                } else {
                    window.location.href = "/web/api/task/comments?type=" + type + '&taskId=' + id;
                }
            }
        }
    })
</script>
